<!doctype html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include-front-custom :: head('5180it.com','欢迎进入')"/>


     <style>
        .swiper-container {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
        }

        .swiper-slide {
            position: relative;
        }

        .swiper-slide .content {
            width: 50%;
            max-width: 460px;
            position: absolute;
            right: 60px;
            bottom: 90px;
            z-index: 20;
        }

        @media screen and (max-width: 768px) {
            .swiper-slide .content {
                display: none;
            }
        }

        .swiper-slide .content .txt {
            padding: 20px;
            background: rgba(255, 255, 255, 0.85);
        }

        .swiper-slide .content .txt h3 {
            font-family: "BerlingskeSans Serif", Georgia, Times, serif;
            margin: 0;
            font-size: 2.3em;
            font-weight: normal;
        }

        .swiper-slide .content .txt p {
            margin: 5px 0 0;
            font-size: 1.2em;
        }

        .swiper-slide .content .link {
            border-radius: 25px;
            display: block;
            background: #008369;
            transition: .2s background;
            color: #fff;
            font-family: "BerlingskeSans Bd", Tahoma, helvetica, arial, sans-serif;
            text-align: center;
            font-weight: 400;
            font-size: 1.1em;
            line-height: 1.1em;
            padding: 10px 30px 10px;
            float: right;
            margin-top: 15px;
            text-decoration: none;
        }

        .swiper-slide .content .link:hover {
            background: #006a55;
        }

        .img-fix {
            /*margin-top: -25%;*/
            overflow: hidden;
        }

        .img-inner {
            transform: translateY(0%);
        }

        .swiper-container img {
            width: 100%;
            display: block;
        }

        .swiper-button-next, .swiper-button-prev {
            background: none;
            top: auto;
            bottom: 30px;
        }

        .swiper-button-prev {
            left: 0;
        }

        .swiper-button-next {
            right: 40px;
        }

        .swiper-button-next:before, .swiper-button-prev:before {
            font-family: "upsicons";
            position: absolute;
            display: block;
            height: 54px;
            width: 50px;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 54px;
            color: #fff;
            font-size: 68px;
        }

        .swiper-button-prev:before {
            content: '\e628';
        }

        .swiper-button-next:before {
            content: '\e62a';
        }

        .bottom-nav {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 30px;
            z-index: 10;
        }

        .ups-icon-videoplay {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px;
            cursor: pointer;
        }

        .ups-icon-videoplay:before {
            font-family: "upsicons";
            content: "\e680";
            font-size: 28px;
            color: white;
        }

        .stop-status.ups-icon-videoplay:before {
            content: "\e681";
        }

        .swiper-pagination {
            position: relative;
            display: inline-block;
            height: 29px;
            vertical-align: middle;
        }

        #ups-banner .swiper-pagination-bullet {
            width: 18px;
            height: 18px;
            background: #fff;
            opacity: 1;
            box-sizing: border-box;
            border: 3px solid #fff;
            margin: 0 15px;
            vertical-align: middle;
        }

        #ups-banner .swiper-pagination-bullet-active {
            background: #ffb500;
        }

        @media (max-width: 767px) {
            .swiper-button-prev:before {
                content: '\e627';
            }

            .swiper-button-next:before {
                content: '\e629';
            }

            .swiper-button-next, .swiper-button-prev {
                bottom: 10px;
            }

            .swiper-button-next:before, .swiper-button-prev:before {
                font-size: 32px;
            }

            .bottom-nav {
                bottom: 10px;
            }

            #ups-banner .swiper-pagination-bullet {
                width: 12px;
                height: 12px;
                border-width: 2px;
                margin: 0 10px;
            }

            .ups-icon-videoplay {
                margin-right: 10px;
            }
        }
    </style>
     <link rel="stylesheet" th:href="@{/front/css/font.css}"/>
     
    <!-- 遮罩层 -->
    <script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>

    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/dimple/js/common.js}"></script>
    <script th:src="@{/dimple/js/ui.js}"></script>
</head>

<body class="nobg">
<!--<th:block th:replace="include-front-custom :: header"/>-->
<header class="myheader" th:fragment="header">
    <!--导航开始-->
    <div class="top">
        <div class="top-left">
            <!--logo部分-->
            <div class="logo">
                <a href="/">
                    <img src="/front/images/logo.png"/>
                </a>
            </div>
            <!--滚动消息-->
            <div class="web-xiaoxi">
                <i class="fa fa-volume-up"></i>
                <ul class="mulitline">
                    <li th:each="notice:${notices}" th:text="${notice.noticeTitle}"></li>
                </ul>
            </div>
            <!--手机菜单按钮-->
            <div class="mobile-nav"><i class="fa fa-list"></i><i class="fa fa-remove"></i></div>
        </div>
        <!--电脑导航开始-->
        <nav class="mynav">
            <ul class="orange-text">
                <li th:each="func:${funcList}">
                    <a th:href="${'/king/func/'+func.id+'.html'}"
                       th:text="${func.funcName}"></a>
                </li>
                <li>
                    <a th:href="${'/bbs/'+loginName+'.html'}" style="color: #000000;">返回</a>
                </li>
                 <li>
                    <a onclick="openAddDiolog();" style="color: #000000;">+添加菜单</a>
                 </li>
            </ul>

            <!--移动的滑动-->
            <div class="move-bg"></div>
            <!--移动的滑动 end-->
        </nav>

        <!--手机导航-->
        <div class="mob-menu">
            <!--手机下拉菜单-->
            <ul class="mob-ulnav">
                <li th:each="func:${funcList}">
                    <a th:href="${'/king/func/'+func.id+'.html'}"
                       th:text="${func.funcName}"></a>
                </li>
                <li>
                    <a th:href="${'/bbs/'+loginName+'.html'}" style="color: #000000;">返回</a>
                </li>
                <li>
                    <a onclick="openAddDiolog();" style="color: #000000;">+添加菜单</a>
                 </li>
            </ul>
        </div>
    </div>
    <!--导航结束-->
</header>

<!--内容区开始-->
<div class="container">
    <span>
        <a th:onclick="toFirst([[${funcId}]]);">【置顶】</a>
        <a th:onclick="toUpdate([[${funcId}]]);">【修改】</a>
        <a th:onclick="toDel([[${funcId}]]);">【删除】</a>
    </span>
    <!--最新文章-->
    <section class="mysection" style="width: 95%;">
    	<span style="float: right;">
         	<a th:onclick="toCarouselMaps();">【轮播图片管理】</a>
         </span>
    	<hr>
    	 <!--轮播图开始-->
        <div id="ups-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" th:each="carouselMap:${carouselMaps}">
                        <div class="content">
                            <div class="txtXXXX"><h3 th:text="${carouselMap.title}" style="background:none;"></h3>
                                <p th:text="${carouselMap.subTitle}"></p>
                            </div>
                            <!-- <a th:target="${(carouselMap.target=='1')?'_blank':''}"
                               th:href="${'/f/carouselMap/'+carouselMap.carouselId+'?url='+carouselMap.url}"
                               class="link">详情点击</a> -->
                         </div>
                        <div class="img-fix">
                            <div class="img-inner">
                                <img th:src="${carouselMap.imgUrl}" class="imgs">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="ups-icon-videoplay"></div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
        <!-- 轮播图结束-->
        
        <h4 class="index-title">
            <a th:href="${'/bbs/'+loginName+'.html'}">
            	<i class="fa fa-home"></i>首页 &nbsp;> 
            </a>
            <span class="orange-text" th:text="${funcName}"></span>
            <span style="float:right;margin-right:10px;">共有文章:<font class="orange-text"
                th:text="${blogs.total}"></font>篇</span>
        </h4>
        <div style="font-size: 14px;">
            <span style="float: right;">
            	<a th:onclick="toAddBlog([[${funcId}]]);">【添加博客】</a>
            </span>
        </div>
        <!--<div>
            <p class="smallText" th:text="${'分类描述：'+funcName}"></p>
            <p class="smallText" th:text="${'创建时间：'+funcName}"></p>
        </div>-->
        <hr/>
        <div class="arclist">
            <!--列表开始-->
            <ul>
                <li th:each="blog:${blogs.list}">
                	<div style="float: right;">
                		<a class="btn btn-success " href="javascript:void(0)" th:onclick="openModal('/blog/blog/func/edit/[[${blog.blogId}]]','100%','100%','编辑博客');">
                         	<i class="fa fa-edit"></i> 编辑
                         </a>
                         <a class="btn btn-danger  " href="javascript:void(0)" th:onclick="delObj([[${blog.blogId}]]);">
                         	<i class="fa fa-remove"></i> 删除
                         </a>
                	</div>
                    <div class="arcimg"  th:onclick="viewBlog([[${+blog.blogId}]]);">
                        <img th:src="${blog.headerImg}" th:alt="${blog.title}" th:title="${blog.title}"/>
                    </div>
                    <div class="arc-right">
                        <h4 class="blue-text">
                            <a th:href="${'/bbs/'+curUser.loginName+'/'+funcId+'/'+blog.blogId+'.html'}"
                               th:title="${blog.title}"
                               th:text="${blog.title}">
                            </a>
                        </h4>
                        <p th:text="${blog.summary}"></p>
                        <ul>
                            <li>
                                <a th:title="${#dates.format(blog.createTime, 'yyyy-MM-dd')+'发表'}">
                                    <i class="fa fa-clock-o"></i>
                                    <span th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd')}"></span>
                                </a>
                            </li>
                            <!-- <li>
                                <a title="作者： ls2008"><i class="fa fa-user"></i>ls2008</a>
                            </li> -->
                            <li>
	                             <a th:title="${'已有'+blog.commentCount+'条评论'}" th:href="${'/bbs/'+curUser.loginName+'/'+funcId+'/'+blog.blogId+'.html#Comment'}">
	                                <i class="fa fa-comments-o"></i>
	                                <span th:text="${blog.commentCount}"></span>
	                            </a>
                            </li>
                            <li>
                            	<a th:title="${'已有'+blog.click+'次浏览'}">
                            		<i class="fa fa-eye"></i><span th:text="${blog.click}"></span>
                            	</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!--列表结束-->
        </div>
        <!--分页开始-->
        <div th:replace="navigation :: navigation(${blogs},'king/func',${funcId})"></div>
        <!--分页结束-->
    </section>
    <!--左侧结束-->
    <!--<th:block th:replace="include-front-custom :: side"/>-->
</div>
<!--<th:block th:replace="include-front-custom :: footer"/>-->

<script>

	$(function () {
	    var upsSwiper = new Swiper('.swiper-container', {
	        speed: 1000,
	        longSwipes: false,
	        loop: true,
	        autoplay: {
	            disableOnInteraction: false,
	        },
	        navigation: {
	            nextEl: '.swiper-button-next',
	            prevEl: '.swiper-button-prev',
	        },
	        pagination: {
	            el: '.swiper-pagination',
	            clickable: true,
	        },
	        on: {
	            autoplayStop: function () {
	                this.$el.find(".ups-icon-videoplay").addClass('stop-status');
	            },
	            autoplayStart: function () {
	                this.$el.find(".ups-icon-videoplay").removeClass('stop-status');
	            },
	
	        }
	    });
	
	    upsSwiper.$el.find(".ups-icon-videoplay").on('click', function () {
	        if (upsSwiper.autoplay.running) {
	            upsSwiper.autoplay.stop();
	        } else {
	            upsSwiper.autoplay.start();
	        }
	    });
	});

    function delObj(objId){
        layer.confirm('确定删除该记录吗?', {
            icon: 3,
            title: "系统提示",
            btn: ['确认', '取消']
        }, function (index) {
            layer.close(index);
            $.operate.submit ('/blog/blog/remove', 'delete', 'json', {"ids":objId}, function(result){
               window.location.href="/king/func/[[${funcId}]].html";
            });
        });
    }
    
    //添加菜单
    function openAddDiolog(){
    	 layer.open({
             type: 2,
             area: ['80%', '200px'],
             fix: false,
             //不固定
             maxmin: true,
             shade: 0.3,
             title: "添加菜单",
             content: '/king/func/onBlogAdd',
             btn: ['确定', '关闭'],
             // 弹层外区域关闭
             shadeClose: true,
             yes: function (index, layero) {
                 var iframeWin = layero.find('iframe')[0];
                 iframeWin.contentWindow.submitHandler(index, layero);
             },
             cancel: function (index) {
                 return true;
             }
         });
    }
    
    //置顶
    function toFirst(funcId){
    	layer.confirm('确定要置顶该菜单吗?', {icon: 3,title: "系统提示",btn: ['确认', '取消']}, 
    	function (index) {
            layer.close(index);
            $.ajax({
	            type: "POST",
	            url: "/king/func/toFirst/"+funcId,
	            data: {},
	            dataType: "json",
	            success: function (data) {
	            	console.info(data);
	                if (data.code == 200) {
	                	layer.msg(data.msg, {icon: 1});
	                    window.location.reload();
	                }else{
	                	 layer.msg(data.msg, {icon: 2});
	                }
	            },
	            error: function (jqXHR) {
	                layer.msg('发送错误：' + jqXHR.status, {icon: 2});
	            },
	        });
        });
    }
    
    //添加菜单
    function toUpdate(funcId){
    	 layer.open({
             type: 2,
             area: ['80%', '200px'],
             fix: false,
             //不固定
             maxmin: true,
             shade: 0.3,
             title: "添加菜单",
             content: '/king/func/edit/'+funcId,
             btn: ['确定', '关闭'],
             // 弹层外区域关闭
             shadeClose: true,
             yes: function (index, layero) {
                 var iframeWin = layero.find('iframe')[0];
                 iframeWin.contentWindow.submitHandler(index, layero);
             },
             cancel: function (index) {
                 return true;
             }
         });
    }
    
    function toDel(funcId){
    	layer.confirm('确定要删除该菜单吗?', {icon: 3,title: "系统提示",btn: ['确认', '取消']}, 
    	function (index) {
            layer.close(index);
            $.ajax({
	            type: "GET",
	            url: "/king/func/remove/"+funcId,
	            data: {},
	            dataType: "json",
	            success: function (data) {
	            	console.info(data);
	                if (data.code == 200) {
	                	layer.msg(data.msg, {icon: 1});
	                    window.location.reload();
	                }else{
	                	 layer.msg(data.msg, {icon: 2});
	                }
	            },
	            error: function (jqXHR) {
	                layer.msg('发送错误：' + jqXHR.status, {icon: 2});
	            },
	        });
        });
    }
    
    //添加博客
    function toAddBlog(funcId){
   		layer.open({
               type: 2,
               area: ['100%', '100%'],
               fix: false,//不固定
               //maxmin: true,
               shade: 0.3,
               title: "添加博客",
               content: '/blog/blog/add/'+funcId+'.html',
               shadeClose: true,//// 弹层外区域关闭
               //btn: ['确定', '关闭'],
               yes: function (index, layero) {
                   var iframeWin = layero.find('iframe')[0];
                   iframeWin.contentWindow.submitHandler(index, layero);
               },
               cancel: function (index) {
                   return true;
               }
         });
    }
    
    //点击图片跳转到博客明细
    function viewBlog(blogId){
    	window.location.href='/bbs/[[${curUser.loginName}]]/[[${funcId}]]/'+blogId+'.html';
    }
    
    //轮播图片管理
    function toCarouselMaps(){
   		layer.open({
            type: 2,
            area: ['100%', '100%'],
            fix: false,//不固定
            //maxmin: true,
            shade: 0.3,
            title: "图片管理",
            content: '/system/carouselMap/blogEdit',
            shadeClose: true,//// 弹层外区域关闭
            btn: ['确定', '关闭'],
            yes: function (index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
                parent.layer.close(index);
                window.location.reload();
            },
            cancel: function (index) {
                return true;
            }
      });
    }
</script>
</body>
</html>